<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>采购订单管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
    /* 基础样式优化 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        line-height: 1.6;
    }

    body {
        background: #f3f4f6;
    }

    .module-section {
        padding: 2rem;
        max-width: 1600px;
        margin: 0 auto;
    }

    .card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        padding: 2rem;
        margin-bottom: 2rem;
        border: 1px solid #e5e7eb;
    }

    .module-title {
        font-size: 1.8rem;
        color: #1f2937;
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #f3f4f6;
    }

    /* 增强表单样式 */
    .triple-column-form {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        margin-top: 1.5rem;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group label {
        display: block;
        margin-bottom: 0.75rem;
        color: #374151;
        font-weight: 500;
        font-size: 1rem;
    }

    input, select, textarea {
        width: 100%;
        padding: 1rem;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        font-size: 1rem;
        transition: all 0.2s;
        background: #f9fafb;
    }

    input:focus, select:focus, textarea:focus {
        border-color: #6366f1;
        background: white;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    /* 商品明细区域 */
    .goods-item-row {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 60px;
        gap: 1.5rem;
        align-items: center;
        margin-bottom: 1.5rem;
        padding: 1rem;
        background: #f8f9fa;
        border-radius: 8px;
    }

    .goods-controls {
        display: flex;
        gap: 1rem;
        align-items: center;
        margin-top: 1rem;
    }

    /* 金额显示 */
    .amount-display {
        font-size: 1.5rem;
        color: #4338ca;
        font-weight: 600;
        padding: 1.5rem 0;
        border-top: 2px solid #f3f4f6;
        margin-top: 1.5rem;
    }

    /* 按钮样式优化 */
    .submit-btn {
        background: #4f46e5;
        color: white;
        padding: 1rem 2rem;
        border-radius: 8px;
        font-size: 1.1rem;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .submit-btn:hover {
        background: #4338ca;
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .action-btn {
        padding: 0.75rem;
        border-radius: 6px;
        background: white;
        border: 1px solid #e5e7eb;
        cursor: pointer;
        transition: all 0.2s;
    }

    .action-btn:hover {
        background: #4f46e5;
        color: white;
        border-color: #4f46e5;
    }

    /* 表格优化 */
    .data-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin-top: 1.5rem;
    }

    .data-table th {
        background: #f8f9fa;
        color: #374151;
        font-weight: 600;
        padding: 1.25rem;
        text-align: left;
        border-bottom: 2px solid #e5e7eb;
        font-size: 1rem;
    }

    .data-table td {
        padding: 1.25rem;
        border-bottom: 1px solid #f3f4f6;
        color: #4b5563;
        font-size: 1rem;
    }

    .data-table tr:hover td {
        background: #f8f9fa;
    }

    /* 状态徽章 */
    .status-badge {
        display: inline-flex;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 500;
        align-items: center;
        gap: 0.5rem;
    }

    .status-pending {
        background: #fff7ed;
        color: #f97316;
    }

    .status-completed {
        background: #f0fdf4;
        color: #22c55e;
    }

    .status-canceled {
        background: #f8fafc;
        color: #64748b;
    }

    /* 搜索栏优化 */
    .search-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
    }

    .search-box {
        width: 360px;
        position: relative;
    }

    .search-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #6b7280;
    }

    .search-input {
        padding-left: 3rem !important;
        border-radius: 50px;
        background: #f8f9fa !important;
    }

    /* 响应式设计 */
    @media (max-width: 1280px) {
        .triple-column-form {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 1024px) {
        .module-section {
            padding: 1.5rem;
        }

        .goods-item-row {
            grid-template-columns: 1fr;
            gap: 1rem;
        }
    }

    @media (max-width: 768px) {
        .triple-column-form {
            grid-template-columns: 1fr;
        }

        .search-header {
            flex-direction: column;
            align-items: stretch;
            gap: 1.5rem;
        }

        .search-box {
            width: 100%;
        }

        .data-table td {
            padding: 1rem;
        }
    }
    </style>
</head>
<body>
    <div class="module-section">
        <!-- 新建订单卡片 -->
        <div class="card">
            <h2 class="module-title">
                <i class="fas fa-cart-plus" style="color: #4f46e5;"></i>
                新建采购订单
            </h2>

            <form id="purchase-order-form" class="triple-column-form">
                <!-- 供应商信息 -->
                <div class="form-group">
                    <label>供应商选择</label>
                    <select id="supplier-select" class="form-control">
                        <option value="">请选择供应商</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>订单日期</label>
                    <input id="order-date" type="date" required>
                </div>

                <div class="form-group">
                    <label>预计到货日期</label>
                    <input id="expected-date" type="date">
                </div>

                <!-- 商品明细 -->
                <div class="form-group" style="grid-column: 1 / -1;">
                    <label>商品明细</label>
                    <div id="order-items-container"></div>
                    <div class="goods-controls">
                        <button id="add-order-item-btn" type="button" class="submit-btn" style="background: #22c55e; padding: 0.75rem 1.5rem;">
                            <i class="fas fa-plus"></i> 添加商品
                        </button>
                        <div class="amount-display">
                            总金额：¥ <span id="total-amount">0.00</span>
                        </div>
                    </div>
                </div>

                <div class="form-group" style="grid-column: 1 / -1;">
                    <button type="submit" class="submit-btn">
                        <i class="fas fa-check-circle"></i>
                        提交采购订单
                    </button>
                </div>
            </form>
        </div>

        <!-- 订单列表卡片 -->
        <div class="card">
            <div class="search-header">
                <h2 class="module-title">
                    <i class="fas fa-file-invoice" style="color: #4f46e5;"></i>
                    采购订单列表
                </h2>
                <div class="search-box">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" placeholder="搜索订单号或供应商..." class="search-input" id="order-search">
                </div>
            </div>

            <table class="data-table">
                <thead>
                    <tr>
                        <th style="width: 15%;">订单号</th>
                        <th style="width: 25%;">供应商</th>
                        <th style="width: 15%;">订单日期</th>
                        <th style="width: 15%;">总金额</th>
                        <th style="width: 15%;">订单状态</th>
                        <th style="width: 15%; text-align: right;">操作</th>
                    </tr>
                </thead>
                <tbody id="purchase-order-list">
                    <tr><td colspan="7" class="loading">加载中...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>